<template>
  <view class="wrap">
    <u-empty mode="list" v-if="!flowList.length"></u-empty>
    <u-waterfall v-model="flowList" ref="uWaterfall">
      <template v-slot:left="{leftList}">
        <view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="handleGoodsDetail(item)">
          <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
          <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
          <view class="demo-title">
            {{item.name}}
          </view>
          <view style="display: flex;align-items: center;justify-content: space-between">
            <view class="demo-price">
              {{item.price}}元
            </view>
            <view class="demo-count">
              销量 {{item.sale_count}}
            </view>
          </view>

        </view>
      </template>
      <template v-slot:right="{rightList}">
        <view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="handleGoodsDetail(item)">
          <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
          <view class="demo-title">
            {{item.name}}
          </view>
          <view style="display: flex;align-items: center;justify-content: space-between">
            <view class="demo-price">
              {{item.price}}元
            </view>
            <view class="demo-count">
              销量 {{item.sale_count}}
            </view>
          </view>

        </view>
      </template>
    </u-waterfall>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flowList: [

      ]
    }
  },
  onLoad({ id }) {
    this.$api.goodsList({
      category_id: id ? id : ''
    }).then(res => {
      this.flowList = res
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    handleGoodsDetail(item) {
      this.$u.route({
        type: 'navigateTo',
        url: '/pages/goods/detail',
        params: {
          id: item.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-warter {
  border-radius: 8px;
  margin: 5px;
  background-color: #ffffff;
  padding: 8px;
  position: relative;
}

.u-close {
  position: absolute;
  top: 32rpx;
  right: 32rpx;
}

.demo-image {
  width: 100%;
  border-radius: 4px;
}

.demo-title {
  font-size: 30rpx;
  margin-top: 5px;
  color: $u-main-color;
}

.demo-tag {
  display: flex;
  margin-top: 5px;
}

.demo-tag-owner {
  background-color: $u-type-error;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 4rpx 14rpx;
  border-radius: 50rpx;
  font-size: 20rpx;
  line-height: 1;
}

.demo-tag-text {
  border: 1px solid $u-type-primary;
  color: $u-type-primary;
  margin-left: 10px;
  border-radius: 50rpx;
  line-height: 1;
  padding: 4rpx 14rpx;
  display: flex;
  align-items: center;
  border-radius: 50rpx;
  font-size: 20rpx;
}

.demo-price {
  font-size: 30rpx;
  color: #39b54a;
  margin-top: 5px;
}
.demo-count {
  font-size: 24rpx;
  color: $u-type-info;
  margin-top: 5px;
}

.demo-shop {
  font-size: 22rpx;
  color: $u-tips-color;
  margin-top: 5px;
}
</style>